<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>采集器档案</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }
        .tab-title{
            margin-top: 20px;
            text-align: left;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }



    </style>
</head>
<body>
<div  class="page" id="page-elesafe">
<div  :hidden="isShow">
    <div class="page-title">设备管理 › 采集器档案</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode" :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="emuName"  placeholder="请输入采集器名称关键字" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="searchEmu" style="background: #578BBB">查询</el-button>
                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">
                            <el-button type="primary" @click="addClick" style="background: #5BBD8B">新增</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table  border stripe style="width: 100%" :data="EmuData">
                    <el-table-column prop="projectName" label="项目名称" align="center">
                    </el-table-column>
                    <el-table-column prop="EMU_ID" label="采集器编号" align="center">
                    </el-table-column>
                    <el-table-column prop="EMU_NAME" label="采集器名称" align="center">
                    </el-table-column>
                    <el-table-column label="操作"  align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="settingClick(scope.row)" round  size="small"  icon="el-icon-setting"></el-button>
                            <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="small" @click="delClick(scope.row,'collector')"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer" style="left:auto">
                    <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page.sync="currentPage" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>

        </el-row>
        <el-dialog :title="editMod?'编辑采集器':'新增采集器'"  :visible.sync="dialogFormVisible" center  width="30%" :show-close="false">
            <el-form :model="collectorForm" ref="collectorForm" >
                <el-form-item label="采集器编号"
                              prop="EMU_ID" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'编号不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="collectorForm.EMU_ID" autocomplete="off" placeholder="16位长度字符"  :disabled="editMod"></el-input>
                </el-form-item>
                <el-form-item label="采集器名称" prop="EMU_NAME" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="collectorForm.EMU_NAME" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="终端协议" prop="EMU_Protocol" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'终端协议不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="collectorForm.EMU_Protocol" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="区域" prop="EMU_ZoneId" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'区域不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="collectorForm.EMU_ZoneId" placeholder="请选择区域" style="width: 100%;">
                        <el-option
                                v-for="item in zoneList"
                                :key="item.zone_id"
                                :label="item.zone_name"
                                :value="item.zone_id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('collectorForm')" tyle="background: #7eb8b0">取 消</el-button>
                <el-button  @click="submitClick('collectorForm')" style="background:#f9b317">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</div>
<div :hidden="!isShow">
    <div class="page-title">设备管理 › 采集器档案  › 仪表管理</div>
    <br class="page-main">
        <el-button @click="goBack" icon="el-icon-caret-left" style="margin:40px 0 0 30px"></el-button></br>
        <el-row>
            <el-col :span="24" style="padding: 30px">
                <div class="main-head">
                    <p class="tab-title">仪表管理</p>
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="devName" placeholder="请输入设备名称关键字" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="searchMeter" style="background: #578BBB">查询</el-button>
                            <el-button type="primary" @click="addMeter" style="background: #5BBD8B">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table border stripe style="width: 100%" :data="deviceData">
                    <el-table-column prop="DeviceID" label="设备编号" align="center">
                    </el-table-column>
                    <el-table-column prop="DeviceName" label="设备名称" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceType2" label="设备类型" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceModel" label="设备型号" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceType" label="能耗类型" align="center">
                    </el-table-column>
                    <el-table-column prop="Ratio1" label="电流互感" align="center">
                    </el-table-column>
                    <el-table-column prop="Ratio2" label="电压互感" align="center">
                    </el-table-column>
                    <el-table-column prop="RatedPower" label="额定功率" align="center">
                    </el-table-column>
                    <el-table-column prop="DeviceAddress" label="通讯地址" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceLocation" label="安装位置" align="center">
                    </el-table-column>
                    <el-table-column prop="device_port" label="端口号" align="center">
                    </el-table-column>
                    <el-table-column prop="openflag" label="是否启用" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.openflag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.openflag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceimportant" label="是否重点设备" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.deviceimportant == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.deviceimportant == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="device_masterflag" label="是否为总表" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.device_masterflag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.device_masterflag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="195px" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="attrSetting(scope.row)" round size="mini" round icon="el-icon-setting"></el-button>
                            <el-button @click="editSetting(scope.row)" round size="mini" round icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="mini" round @click="delClick(scope.row,'meter')"></el-button>

                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑仪表设备':'新增仪表设备'" width="30%"  :visible.sync="dialogMeterVisible" center :show-close="false" >
            <el-form :model="deviceForm" ref="deviceForm" >
                <el-form-item label="设备编号"  prop="DeviceID" :label-width="formLabelWidth"  :rules="[
                             {required:true,message:'编号不能为空!',trigger:'blur'}
                            ]">

                    <el-input  v-model="deviceForm.DeviceID" autocomplete="off" placeholder="16位长度字符"  :disabled="editMod"></el-input>
                </el-form-item>
                <el-form-item label="设备名称"
                              prop="DeviceName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.DeviceName" autocomplete="off"   ></el-input>
                </el-form-item>
                <el-form-item label="设备类型" prop="deviceType2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'类型不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceType2" placeholder="请选择类型" style="width: 100%;">
                        <el-option
                                v-for="item in devType"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备型号" prop="deviceModel" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'型号不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceModel" placeholder="请选择型号" style="width: 100%;">
                        <el-option
                                v-for="item in devMod"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能耗类型" prop="deviceType" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'类型不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceType" placeholder="请选择类型" style="width: 100%;">
                        <el-option
                                v-for="item in energyType"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="电流互感"
                              prop="Ratio1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.Ratio1" autocomplete="off"  ></el-input>
                </el-form-item>

                <el-form-item label="电压互感"
                              prop="Ratio2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.Ratio2" autocomplete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="额定功率"
                              prop="RatedPower" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.RatedPower" autocomplete="off"   ></el-input>
                </el-form-item>
                <el-form-item label="通讯地址"
                              prop="DeviceAddress" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.DeviceAddress" autocomplete="off"   ></el-input>
                </el-form-item>
                <el-form-item label="安装位置"
                              prop="deviceLocation" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.deviceLocation" autocomplete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="端口号"
                              prop="device_port" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-input  v-model="deviceForm.device_port" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="openflag" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.openflag" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否重点设备" prop="deviceimportant" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.deviceimportant" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为总表" prop="device_masterflag" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="deviceForm.device_masterflag" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('deviceForm')" style="background: #7eb8b0">取 消</el-button>
                <el-button  @click="submitClick('deviceForm')" style="background:#f9b317">保存</el-button>
            </div>
        </el-dialog>

    <el-dialog title="属性配置" :visible.sync="dialogSettingVisible"  width="25%" center :show-close="false">
        <el-form :model="settingForm" ref="settingForm">
            <el-form-item label="设备名称" prop="name" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="settingForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="高限1" prop="high1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="settingForm.high1" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="高限2" prop="high2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="settingForm.high2" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="底限1" prop="low1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="settingForm.low1" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="底限2" prop="low2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="settingForm.low2" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelClick('settingForm')" style="background: #7eb8b0">取 消</el-button>
            <el-button  @click="submitClick('settingForm')" style="background:#f9b317">确 定</el-button>
        </div>
    </el-dialog>
    <div class="page-footer">
        <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page.sync="currentPage" @current-change="onChangePage">
        </el-pagination>
    </div>
    </div>


</div>
</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-elesafe',
        data:{
            formLabelWidth: '120px',
            day:'',
            EmuData:'',
            proList:'',
            deviceData:'',
            dialogFormVisible:false,
            dialogMeterVisible:false,
            dialogSettingVisible:false,
            currentPage:1,
            currentEmuId:'',
            currentProNo:'',
            emuName:'',
            devName:'',
            zoneList:'',
            collectorForm:{
                projectName:'',
                EMU_ID:'',
                EMU_NAME:'',

            },
            deviceForm:{

            },
            settingForm:{

            },
            totalCount:0,
            isShow:false,
            editMod:'',
            devType:'',
            energyType:'',
            devMod:'',
            emuProNo:'',
            tooltip:false,
        },
        methods:{
            searchEmu:function(){
                this.getEmuData({EMU_NAME:this.emuName,EMU_ProjectNo:this.emuProNo});
            },
            searchMeter:function(){
                this.getDeviceData({EMUID:this.currentEmuId,DeviceName:this.devName});
            },
            selectTrigger:function(proNo){

            },
            userNode:function(data){
                this.emuName = '';
                this.emuProNo = '';
                var ids = data.id.split('_');
                if(ids[0] =='P'){
                    this.emuProNo = data.attributes.projectNo;
                    this.getEmuData({emU_ProjectNo: data.attributes.projectNo});
                    HttpUtil.get('Zone/ListForProjectNo',{ProjectNo:data.attributes.projectNo}).success((res)=>{
                        this.zoneList = res.data;
                    });
                } else  this.EmuData ='';

            },
            addMeter:function(){
                this.deviceForm={};
                this.editMod=false;
                this.dialogMeterVisible=true;
            },
            editSetting:function(data){
                this.editMod=true;
                this.dialogMeterVisible=true;
                this.deviceForm = data;
                this.deviceForm.openflag = this.deviceForm.openflag+"";
            },
            attrSetting:function(){
                 this.dialogSettingVisible = true;
            },
            aa:function(data){
            },
            goBack:function(){
                this.isShow = false;
                this.currentPage = 1;
            },
            addClick:function(){
                if (this.emuProNo==''){
                    this.$message.error('请选择项目');
                    return;
                }
                this.collectorForm={};
                this.editMod=false;
                this.dialogFormVisible=true;
            },
            handleClick(data){
                this.editMod=true;
                this.dialogFormVisible=true;
                this.collectorForm = data;
                console.log(this.collectorForm);
            },
            delClick(data,flag) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if(flag == 'collector'){
                        HttpUtil.get('Emu/Delete',{EMU_ID: data.EMU_ID}).success((res)=>{
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getEmuData();
                        });
                    }else if (flag == 'meter') {

                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    this.collectorForm.emU_ProjectNo = this.emuProNo;
                    if (valid){
                         if (this.editMod){
                             // 修改
                             switch (formName) {
                                 case 'collectorForm':

                                     console.log(this.collectorForm);

                                     HttpUtil.get('Emu/Update',this.collectorForm).success((res)=>{
                                         this.$message({
                                             type:'success',
                                             message:'修改成功'
                                         });
                                         this.getEmuData();
                                         this.cancelClick(formName);
                                     });
                                     break;
                                 case 'deviceForm':
                                     console.log(this.deviceForm);
                                     HttpUtil.get('Device/Update',this.deviceForm).success((res)=>{
                                         this.$message({
                                             type:'success',
                                             message:'修改成功'
                                         });
                                         this.getDeviceData({EMUID:this.currentEmuId});
                                         this.cancelClick(formName);
                                     })
                             }
                         } else{
                             //添加
                             switch (formName) {
                                 case 'collectorForm':
                                     console.log(this.collectorForm);
                                     HttpUtil.get('Emu/Add',this.collectorForm).success((res)=>{
                                             this.$message({
                                                 type:'success',
                                                 message:'添加成功'
                                             });
                                             this.getEmuData();
                                             this.cancelClick(formName);
                                     });
                                     break;
                                 case 'deviceForm':
                                     this.deviceForm.EMUID = this.currentEmuId;
                                     this.deviceForm.ProjectNo = this.currentProNo;
                                     HttpUtil.get('Device/Add',this.deviceForm).success((res)=>{
                                         this.$message({
                                             type:'success',
                                             message:'添加成功'
                                         });
                                         this.getDeviceData({EMUID:this.currentEmuId});
                                         this.cancelClick(formName);
                                     });
                                     break;
                             }
                         }
                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            onChangePage(page){
                if (this.isShow){
                    this.getDeviceData({pageno:page,pagesize: 10,EMUID:this.currentEmuId,DeviceName:this.devName});
                } else {
                    this.getEmuData({pageno:page,pagesize: 10,emU_ProjectNo:this.emuProNo});
                }
            },
            settingClick(data){
              console.log(data);
              this.isShow = true;
              this.currentEmuId = data.EMU_ID;
              this.currentProNo = data.emU_ProjectNo;
              this.getDeviceData({EMUID:data.EMU_ID});
              this.currentPage = 1;
            },
            cancelClick(formName){
                this.$refs[formName].clearValidate()

                this.dialogFormVisible = false;
                this.dialogMeterVisible = false;
                this.dialogSettingVisible = false;
            },
            getEmuData(param){
                HttpUtil.get('Emu/List',param).success((res)=>{
                    this.EmuData=res.data;
                    this.totalCount = res.total;
                });
            },
            getDeviceData(param){
                HttpUtil.get('Device/List',param).success((res)=>{
                    res.data.EMUID = param.EMU_ID;
                    this.deviceData=res.data;
                    this.totalCount = res.total;
                })
            }
        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);
            this.getEmuData();
            HttpUtil.get('Project/List').success((res)=>{
                this.proList = res.data;
            });
            HttpUtil.get('CodeController/List',{pid:"DeviceType2"}).success((res)=>{
                     this.devType = res.data;
            });
            HttpUtil.get('CodeController/List',{pid:"EnergyType"}).success((res)=>{
                this.energyType = res.data;
            });
            HttpUtil.get('CodeController/List',{pid:"DeviceModule"}).success((res)=>{
                this.devMod = res.data;
            });
        },
        mounted:function(){
           this.tooltip = true;
        }
    });


</script>

</body>
</html>
